<template>
	<view class="vip_container">
		<view class="login_box">
			<view>
				<view class="form_box">
					<text class="txt1">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</text>
					<input type="text" placeholder-class="account-txt" v-model="params.name" class="uni-input" placeholder="请输入您要绑定的姓名" />
				</view>
				<view class="form_box">
					<text class="txt1">手&nbsp;&nbsp;机&nbsp;号：</text>
					<input type="text" placeholder-class="account-txt" v-model="params.mobileNo" class="uni-input" placeholder="请输入您要绑定的手机号码" />
				</view>
				<view class="form_box">
					<text class="txt1">银&nbsp;&nbsp;行&nbsp;卡：</text>
					<input type="text" placeholder-class="account-txt" v-model="params.idNo" class="uni-input" placeholder="请输入您要绑定的银行卡号" />
				</view>
				<view class="form_box">
					<text class="txt1">身&nbsp;&nbsp;份&nbsp;证：</text>
					<input type="text" placeholder-class="account-txt" v-model="params.idCard" class="uni-input" placeholder="请输入您要绑定的身份证号码" />
				</view>
			</view>
			<view @click="jumpCarList" style="border: 1px solid #477EDA; padding: 10rpx 20rpx;width: 160rpx;display: flex;border-radius: 8rpx;">
				<text class="txt1">支持银行查看</text>
			</view>
			<view class="boxsss" v-if="showBox">
				<view class="modal_boxs" style="position: relative;">
					<view style="padding: 40rpx 20rpx;display: flex;justify-content: center;align-items: center;">
						<text class="modal_box">请输入手机验证码</text>
					</view>
					
					<view class="uni-list-cell-db">
						<input type="text" v-model="yzm" style="border: 0.1px solid #ddd;width: 96%;" class="uni-input" placeholder="请输入验证码" />
					</view>
					<view style="display: flex;flex-direction: row; justify-content: center;align-items: center;">
						<button type="primary" class="lisis" style="background-color: #477EDA;margin: 30rpx;font-size: 28rpx;" @click="cancelFlag">取消</button>
						<button type="primary" class="lisis" style="background-color: #477EDA;margin: 30rpx;font-size: 28rpx;" @click="querenCK">确认</button>
					</view>
				</view>
			</view>
			<view style="display: flex;justify-content: center;align-items: center;">
				<button type="primary" class="btn_pri" style="background-color: #477EDA;" @click="toBind">提交绑定</button>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				params: {
					mobileNo: '',
					name: '',
					idNo: '',
					idCard: ''
				},
				memberInfo: {},
				showBox: false,
				yzm: '',
				tranceNum: ''
			}
		},
		onShow:function(){
			this._getIndividualMemberInfo()
		},
		methods: {
			cancelFlag() {
				this.showBox = false;
			},
			querenCK() {
				if(this.yzm == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
				} else {
					this.showBox = false
					let _thats = this
					uni.showLoading({
						title: '绑卡中...'
					})
					let bizUserId = uni.getStorageSync('bizUserId')
					uni.request({
						method: 'POST',
						url: 'https://wlreaohs.xiaomy.net/common/biz/cloud/member/bindBankCard',
						data: {
							bizUserId: bizUserId,
							phone: _thats.params.mobileNo,
							tranceNum: _thats.tranceNum,
							verificationCode: _thats.yzm
						},
						header: { 'content-type': 'application/json' },
						success: (ress) => {
							console.log(ress)
							if(ress.data.code == 0) {
								if(ress.data.data == null) {
									uni.hideLoading()
									uni.showModal({
										title: '温馨提示',
										content: `${ress.data.subMsg}`,
										showCancel: false
									});
								} else {
									uni.hideLoading()
									uni.showModal({
										title: '温馨提示',
										content: `绑卡成功~`,
										showCancel: false,
										success: function (res) {
											if (res.confirm) {
												uni.switchTab({
													url: '/pages/me/me'
												})
											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
									});
								}
							} else {
								uni.hideLoading()
								uni.showModal({
									title: '温馨提示',
									content: `${ress.data.msg}`,
									showCancel: false
								});
							}
						},
						fail: (err) => {
							uni.hideLoading()
							console.log(err)
						}
					})
				}
			},
			jumpCarList() {
				uni.navigateTo({
					url: './carList'
				})
			},
			_getIndividualMemberInfo() {
				let bizUserId = uni.getStorageSync('bizUserId')
				uni.request({
					method: 'POST',
					url: 'https://wlreaohs.xiaomy.net/common/biz/cloud/member/getIndividualMemberInfo',
					data: {
						bizUserId: bizUserId
					},
					header: { 'content-type': 'application/json' },
					success: (res) => {
						if(res.data.code == 0) {
							this.memberInfo = res.data.data.memberInfo
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.log(err)
					}
				})
			},
			toBind() {
				var that = this;
				if(that.params.name=='') {
					uni.showToast({
		                title: '请输入姓名',
		                icon: 'none'
		            });
				} else if(that.params.mobileNo=='') {
					uni.showToast({
		                title: '请输入手机号',
		                icon: 'none'
		            });
				} else if(that.params.idNo=='') {
					uni.showToast({
		                title: '请输入银行卡号',
		                icon: 'none'
		            });
				} else if(that.params.idCard=='') {
					uni.showToast({
		                title: '请输入身份证号',
		                icon: 'none'
		            });
				} else {
					if(!that.memberInfo.isSignContract) {
						uni.showModal({
							title: '操作提示',
							content: '您未签约，完成绑卡前需签约！',
							showCancel: true,
							confirmText: '去签约',
							success: function (res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '../toSign'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						// 已签约
						uni.showLoading({
							title: '绑定中...'
						})
						let bizUserId = uni.getStorageSync('bizUserId')
						uni.request({
							method: 'POST',
							url: 'https://wlreaohs.xiaomy.net/common/biz/cloud/member/applyBindBankCard',
							data: {
								bizUserId: bizUserId,
								cardNo: that.params.idNo,
								phone: that.params.mobileNo,
								name: that.params.name,
								identityNo: that.params.idCard
							},
							header: { 'content-type': 'application/json' },
							success: (res) => {
								if(res.data.code == 0) {
									uni.hideLoading()
									that.showBox = true;
									this.tranceNum = res.data.data.tranceNum
								} else {
									uni.hideLoading()
									uni.showModal({
										title: '温馨提示',
										content: `${res.data.msg}`,
										showCancel: false
									});
								}
							},
							fail: (err) => {
								uni.hideLoading()
								console.log(err)
							}
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login_box {
		width: 89%;
		position: absolute;
		top: 35rpx;
		left: 0;
		padding: 0 40rpx;
	}
	.uni-input {
		width: 440rpx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.349019607843137);
		padding: 10rpx;
	}
	.hc_img {
		width: 30px;
		height: 30px;
		padding-bottom: 15rpx;
	}
	.register_yzm {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border: 1px solid red;
	}
	.register_yzms {
		background-color: #477EDA;
		box-shadow: 5px 5px 5px rgba(242, 242, 242, 0.349019607843137);
		color: #FFFFFF;
		font-family: 'Arial Normal', 'Arial';
		font-weight: 400;
		font-size: 24rpx;
		border-radius: 10rpx;
		text-align: center;
		height: 70rpx;
		line-height: 75rpx;
		padding: 0 20rpx 0 20rpx;
	}
	.input_yzm {
		width: 290rpx;
		padding: 10rpx;
	}
	.yzm {
		width: 190rpx;
		height: 50rpx;
	}
	.txt1 {
		color: rgb(74, 74, 74);
		font-weight: 500;
		font-size: 28rpx;
	}
	.boxsss {
		width: calc(100% - 40rpx);
		height: 100%;
		display: block;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		background-color: rgba(102, 102, 102, 0.498039215686275);
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
		z-index: 999;
	}
	.modal_boxs {
		width: 60%;
		display: flex;
		flex-direction: column;
		background-color: rgba(252, 252, 252, 1);
		border-radius: 10rpx;
		padding: 0 20px;
	}
	.btn_pri {
		border-radius: 30rpx;
		margin-top: 60rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		width: 90%;
		font-size: 26rpx;
		color: #FFFFFF;
		box-shadow: rgba(25, 94, 215, 0.4) 0px 4px 6px 1px;
	}
	.bg_img {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.txt_txt {
		color: rgb(74, 74, 74);
		font-weight: 500;
		font-size: 24rpx;
	}
	.lisis {
		border-radius: 10rpx;
		width: 150rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		color: #FFFFFF;
		box-shadow: rgba(25, 94, 215, 0.4) 0px 4px 6px 1px;font-size: 20rpx;
	}
	.account-txt {
		font-size: 24rpx;
	}
	.txt_box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		padding: 0 30rpx;
	}
	.img_box {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.form_box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-bottom: 30rpx;
	}
</style>
